<script lang="ts" setup>
import { usePost } from './utils'
import type { JobLogType, JobType } from './utils/model'
import Icon from '@/components/icon/Icon.vue'
import { useJobLog } from './utils/JobLog'
import SpDict from '@/components/SpDict/index.vue'
import { transformI18n } from '@/plugins/i18n'

const {
  openModal,
  deleteData,
  search,
  clear,
  batchDeleteChange,
  onSelectChange,
  paginationChange,
  changeJobStatus,
  runJob,
  dataList,
  columns,
  queryParams,
  loading,
  selectedRowKeys,
  switchLoading,
  contextHolder
} = usePost()

const {
  open,
  jobLogColumn,
  jobLogQueryParams,
  jobLogList,
  jobLogLoading,
  afterOpenChange,
  jobLogPaginationChange,
  jobLogSelectedRowKeys,
  jobLogBatchDeleteChange,
  JobLogSelectChange,
  jobLogSearch,
  jobLogClear,
  openJobLogModal,
  showDrawer
} = useJobLog()
</script>

<template>
  <div class="job">
    <contextHolder />
    <a-card style="margin-bottom: 15px">
      <a-form :labelCol="{ style: { width: '85px' } }" label-align="left">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="任务名称" style="margin-bottom: 0">
              <a-input v-model:value="queryParams.jobName" placeholder="请输入任务名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="调用目标">
              <a-input
                v-model:value="queryParams.invokeTarget"
                placeholder="请输入调用目标字符串"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="cron表达式">
              <a-input v-model:value="queryParams.cronExpression" placeholder="请输入cron表达式" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <SpDict
              v-model="queryParams.jobGroup"
              dictType="sys_job_group"
              label="任务分组"
              name="jobGroup"
              placeholder="请选择任务分组"
              type="select"
            />
          </a-col>
          <a-col :span="8">
            <SpDict
              v-model="queryParams.status"
              dictType="sys_job_status"
              label="状态"
              name="status"
              placeholder="请选择任务状态"
              type="select"
            />
          </a-col>
          <a-col :span="8">
            <a-button style="margin-right: 15px" type="primary" @click="search"
              >{{ transformI18n('table.query.search') }}
            </a-button>
            <a-button @click="clear">{{ transformI18n('table.query.clear') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <SpTable
        :column-list="columns"
        :data="dataList"
        :loading="loading"
        :paging="queryParams"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :scroll="{ x: 0 }"
        add-button
        delete-button
        derive-button
        print-button
        @add-change="openModal('新增')"
        @pagination-change="paginationChange"
        @batch-delete-change="batchDeleteChange"
      >
        <template #operation="{ record }: { record: JobType }">
          <a-button size="small" type="link" @click="openModal('编辑', record)"
            >{{ transformI18n('btn.edit') }}
          </a-button>
          <a-popconfirm
            cancel-text="取消"
            ok-text="确定"
            placement="left"
            title="您确认删除这条数据吗？"
            @confirm="deleteData(record)"
          >
            <a-button danger size="small" type="link">{{ transformI18n('btn.delete') }}</a-button>
          </a-popconfirm>
          <a-dropdown>
            <a class="ant-dropdown-link" style="font-size: 12px" @click.prevent>
              更多
              <Icon type="icon-doubleright" />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="runJob(record)">
                  <Icon style="font-size: 12px" type="icon-play-circle" />
                  执行一次
                </a-menu-item>

                <a-menu-item @click="showDrawer(record)">
                  <Icon type="icon-eye" />
                  调度日志
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template #status="{ record, index }: { record: JobType; index: number }">
          <a-switch
            v-model:checked="record.status"
            :checkedValue="1"
            :loading="switchLoading[index]"
            :unCheckedValue="0"
            checked-children="开"
            un-checked-children="关"
            @change="changeJobStatus(record, index)"
          ></a-switch>
        </template>
      </SpTable>
    </a-card>
    <!-- 调度日志   -->
    <a-drawer
      v-model:open="open"
      placement="right"
      title="定时任务调度日志"
      width="60%"
      @after-open-change="afterOpenChange"
    >
      <a-form :labelCol="{ style: { width: '90px' } }" label-align="left">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="任务名称" style="margin-bottom: 0">
              <a-input v-model:value="jobLogQueryParams.jobName" placeholder="请输入任务名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="调用目标">
              <a-input
                v-model:value="jobLogQueryParams.invokeTarget"
                placeholder="请输入调用目标字符串"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="cron表达式">
              <a-input
                v-model:value="jobLogQueryParams.cronExpression"
                placeholder="请输入cron表达式"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <SpDict
              v-model="jobLogQueryParams.jobGroup"
              dictType="sys_job_group"
              label="任务分组"
              name="jobGroup"
              placeholder="请选择任务分组"
              type="select"
            />
          </a-col>
          <a-col :span="12">
            <SpDict
              v-model="jobLogQueryParams.status"
              dictType="sys_job_log_status"
              label="状态"
              name="jobGroup"
              placeholder="请选择日志状态"
              type="select"
            />
          </a-col>
          <a-col :span="12">
            <a-form-item>
              <a-button style="margin-right: 15px" type="primary" @click="jobLogSearch"
                >{{ transformI18n('table.query.search') }}
              </a-button>
              <a-button @click="jobLogClear">{{ transformI18n('table.query.clear') }}</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <SpTable
        :column-list="jobLogColumn"
        :data="jobLogList"
        :loading="jobLogLoading"
        :paging="jobLogQueryParams"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: jobLogSelectedRowKeys,
          onChange: JobLogSelectChange
        }"
        delete-button
        @batchDeleteChange="jobLogBatchDeleteChange"
        @pagination-change="jobLogPaginationChange"
      >
        <template #jobMessage="{ record }: { record: JobLogType }">
          <a href="javascript:void(0)" @click="openJobLogModal(record.jobMessage)">查看</a>
        </template>
        <template #exceptionInfo="{ record }: { record: JobLogType }">
          <a href="javascript:void(0)" @click="openJobLogModal(record.exceptionInfo)">查看</a>
        </template>
      </SpTable>
    </a-drawer>
  </div>
</template>

<style scoped></style>
